<template>
  <div
    class="exclusive-selection"
    v-if="newObj.infoArr1.length > 0 && newObj.infoArr2.length > 0"
  >
    <div class="head" v-if="list.name">
      <h2 class="title" v-text="list.name"></h2>
    </div>
    <div class="main">
      <div class="info-box" v-if="newObj.infoArr1.length > 0">
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide v-for="item of newObj.infoArr1" :key="item.bookId">
            <img
              @click="toDetail(item.bookId)"
              :src="item.coverUrl"
              v-default-img="defaultImg"
            />
          </swiper-slide>
        </swiper>
        <div class="info-text" @click="toDetail(currentInfo.bookId)">
          <h3
            class="ellipsis-two bookTitle"
            v-text="currentInfo.bookTitle"
          ></h3>
          <p class="ellipsis authorName" v-text="currentInfo.authorName"></p>
          <p class="ellipsis-two bookIntro" v-text="currentInfo.bookIntro"></p>
          <button class="preview">Preview</button>
        </div>
      </div>
      <ul class="info-list" v-if="newObj.infoArr2.length > 0">
        <list-template
          v-for="item of newObj.infoArr2"
          :key="item.bookId"
          :item="item"
        />
      </ul>
    </div>
    <!-- <album-list :num="2" :listData="list"></album-list> -->
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
let vm = null;
import listTemplate from "@/components/common/listTemplate/Index";
export default {
  props: {
    list: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      defaultImg: require("@/assets/images/default-cover.png"),
      // infoArr1: [],
      // infoArr2: [],
      activeSlide: 1,
      swiperOption: {
        loop: true,
        initialSlide: 0, //设定初始化时slide的索引
        loopedSlides: 3, // 必设不然最后一张右边没元素
        effect: "coverflow", //3D效果的轮播
        // centeredSlides:true,//设定为true时，active slide会居中，而不是默认状态下的居左。
        //自动播放
        autoplay: {
          delay: 15000,
          disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay
        },
        coverflowEffect: {
          rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
          stretch: 100, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
          depth: 150, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
          modifier: 1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
          slideShadows: false, //开启slide阴影。默认 true。
        },
        on: {
          slideChange() {
            vm.activeSlide = this.realIndex;
          },
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper; //realIndex
    },
    currentInfo() {
      if (this.newObj.infoArr1.length > 0) {
        return this.newObj.infoArr1[this.activeSlide];
      } else {
        return {};
      }
    },
    newObj() {
      if (this.list && this.list.bookHomeDtoList.length > 0) {
        let infoArr1, infoArr2;
        if (this.list.bookHomeDtoList.length >= 5) {
          infoArr1 = this.list.bookHomeDtoList.slice(0, 5);
          if (this.list.bookHomeDtoList.length == 5) {
            infoArr2 = [];
          } else {
            infoArr2 = this.list.bookHomeDtoList.slice(5, 8);
          }
        } else {
          infoArr1 = [];
          infoArr2 = this.list.bookHomeDtoList.slice(0);
        }
        return {
          infoArr1,
          infoArr2,
        };
      } else {
        return {
          infoArr1: [],
          infoArr2: [],
        };
      }
    },
    // info(){
    //   if (Object.keys(this.list).length > 0) {
    //     return "aa"
    //   } else {
    //     return "bb"
    //   }
    // }
  },
  components: {
    swiper,
    swiperSlide,
    listTemplate,
  },
  created() {
    vm = this;
  },
  mounted() {},
  methods: {
    // setArr(arr, min, max) {
    //   if (arr && arr.length > 0) {
    //     if (arr.length >= min) {
    //       this.newObj.infoArr1 = arr.slice(0, min);
    //       if (arr.length == min) {
    //         this.newObj.infoArr2 = [];
    //       } else {
    //         this.newObj.infoArr2 = arr.slice(min, max);
    //       }
    //     } else {
    //       this.newObj.infoArr1 = [];
    //       this.newObj.infoArr2 = arr.slice(0);
    //     }
    //   } else {
    //     this.newObj.infoArr1 = [];
    //     this.newObj.infoArr2 = [];
    //   }
    // },
    // 跳转详情页
    toDetail(id) {
      this.$router.push({
        name: "bookDetail",
        params: { id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.exclusive-selection {
  .head {
    margin: 40px 40px 38px;
    .title {
      font-size: 34px;
      line-height: 48px;
      &::before {
        content: "";
        width: 8px;
        height: 30px;
        border-radius: 0px 4px 4px 0px;
        display: inline-block;
        margin-right: 10px;
        background: linear-gradient(147deg, #f56580 0%, #bd4ff0 100%);
      }
    }
  }
  .main {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .info-box {
      width: calc(100% - 80px);
      height: 234px;
      display: flex;
      justify-content: space-between;
      .swiper-container {
        width: 337px;
        height: 234px;
        margin: auto;
        overflow: hidden;
        img {
          display: block;
          width: 185px;
          height: 234px;
          margin: 0 auto;
          border-radius: 10px;
        }
      }
      .info-text {
        width: 320px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 26px;
        .preview {
          width: 120px;
          height: 38px;
          color: #fff;
          background: #e86472;
          border-width: 0;
          border-radius: 6px;
        }
        .ellipsis-two {
          &.bookTitle {
            font-size: 28px;
            max-height: 72px;
            line-height: 36px;
          }
          &.bookIntro {
            max-height: 52px;
            color: #666666;
            line-height: 26px;
          }
        }
        .ellipsis {
          &.authorName {
            // margin: 6px 0 14px 0;
            line-height: 28px;
            color: #999999;
          }
        }
      }
    }
    .info-list {
      width: calc(100% - 40px);
      height: 200px;
      margin-top: 50px;
      margin-left: 40px;
      display: flex;
      overflow-y: hidden;
      overflow-x: auto;
      .list-template {
        margin-right: 40px;
      }
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    }
  }
}
</style>
